<template>
  <div class="header">
    <div class="header-search">
      <!-- 城市页面的头部左边的返回图标< -->
      <router-link to="/">
        <div class="iconfont header-back">&#xe624;</div>
      </router-link>
      <!-- 城市页面头部中间部分的搜索输入框 -->
      <div class="search">
        <input
          v-model="keyword"
          class="search-input border"
          type="text"
          placeholder="输入城市名或拼音"
        />
      </div>

      <!-- 城市页面的头部右边的搜索文字 -->
      <div class="right-search">搜索</div>
    </div>

    <!-- 城市页面头部下面的当前定位城市显示部分 -->
    <div class="show-adress border-topbottom">
      当前定位城市: {{ this.city }}
    </div>

    <!-- 城市页面搜索如果为空显示的部分 -->
    <div class="search-content" ref="search" v-show="keyword">
      <ul>
        <li
          class="search-item border-bottom"
          v-for="item of list"
          :key="item.id"
          @click="handleCityClick(item.name)"
        >
          {{ item.name }}
        </li>
        <li class="search-item center border-bottom" v-show="hasNoData">
          没有找到匹配数据!!!
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'CitySearch',
  props: {
    cities: Object,
  },
  data() {
    return {
      keyword: '',
      list: [],
      timer: null
    }
  },
  methods: {
    handleCityClick(city) {
      this.changeCity(city);
      this.$router.push("/");
    },
    ...mapMutations(["changeCity"]),
  },
  computed: {
    /* 计算属性，如果list数组的长度为0，表示搜索框里面没有所有到内容，这时显示*/
    hasNoData() {
      return !this.list.length;
    },
    ...mapState(["city"]),
  },
  watch: {
    keyword() {
      /* 节流 */
      if (this.timer) {
        clearTimeout(this.timer);
      }

      /* 如果搜索框里值为空的时候让list数组为空并返回 */
      if (!this.keyword) {
        this.list = [];
        return;
      }

      /* 节流 */
      this.timer = setTimeout(() => {
        /* 定义空数组，并遍历传过来cities对象并判断 cities对象里每一个“A”，“b”这样的数组里面的
        spell（城市名拼音）和name（城市名），判断搜索框输入的内容是否包含如果包含就添加到result数组里
        */
        const result = [];
        for (let i in this.cities) {
          this.cities[i].forEach((value) => {
            if (
              value.spell.indexOf(this.keyword) > -1 ||
              value.name.indexOf(this.keyword) > -1
            ) {
              result.push(value);
            }
          });
        }
        this.list = result;
      }, 100);
    },
  },
  mounted() {
    /* 创建一个better-scroll的实例，并传入一个dom元素指定需要滚动的区域 */
    this.scroll = new Bscroll(this.$refs.search, {
      click: true,
    });
  },
};
</script>

<style lang="less" scoped>
.header {
  .header-search {
    height: 0.44rem;
    line-height: 0.44rem;
    display: flex;
    .header-back {
      width: 0.0795rem;
      height: 0.149rem;
      color: #666;
      margin-left: 0.15rem;
    }
    .search {
      width: 2.77rem;
      height: 0.3rem;
      margin-left: 0.15rem;
      .search-input {
        border: 1px solid #ccc;
        box-sizing: border-box;
        width: 100%;
        height: 0.31rem;
        padding: 0 0.1rem;
        line-height: 0.31rem;
        text-align: center;
        font-size: 0.14rem;
        border-radius: 0.03rem;
        color: #666;
      }
    }
    .right-search {
      margin-left: 0.16rem;
      font-size: 0.15rem;
    }
  }
  .show-adress {
    height: 0.4rem;
    font-size: 0.14rem;
    line-height: 0.4rem;
    padding-left: 0.155rem;
    color: #333;
  }
  .search-content {
    z-index: 1;
    overflow: hidden;
    position: absolute;
    top: 0.7rem;
    left: 0;
    right: 0;
    bottom: 0;
    background: #eee;
    li {
      font-size: 0.14rem;
      color: #333;
    }
    .search-item {
      line-height: 0.31rem;
      padding-left: 0.1rem;
      background: #fff;
      color: #666;
    }
    .center {
      padding-top: 0.24rem;
      text-align: center;
      font-size: 0.16rem;
      color: #d20a0a;
    }
  }
}
</style>
